import React from 'react';
import {
  Modal,
  Row,
  Col,
  List,
  Avatar,
  Timeline,
  Tag,
  Card,
  Button,
} from 'antd';
import {
  TeamOutlined,
  CustomerServiceOutlined,
} from '@ant-design/icons';

const EventDetailModal = ({
  visible,
  onCancel,
  onEdit,
  selectedEvent,
}) => {
  const statusMap = {
    upcoming: { color: 'blue', text: '即将开始' },
    completed: { color: 'green', text: '已完成' },
    cancelled: { color: 'red', text: '已取消' },
  };

  return (
    <Modal
      title={selectedEvent?.title}
      visible={visible}
      onCancel={onCancel}
      footer={[
        <Button key="back" onClick={onCancel}>
          关闭
        </Button>,
        <Button 
          key="edit" 
          type="primary" 
          onClick={() => {
            onCancel();
            onEdit(selectedEvent);
          }}
        >
          编辑活动
        </Button>,
      ]}
      width={800}
    >
      {selectedEvent && (
        <div>
          <Row gutter={[16, 16]}>
            <Col span={12}>
              <Card title="基本信息" size="small">
                <p><strong>类型：</strong> {selectedEvent.type}</p>
                <p><strong>日期：</strong> {selectedEvent.date}</p>
                <p><strong>时间：</strong> {selectedEvent.time}</p>
                <p><strong>地点：</strong> {selectedEvent.location}</p>
                <p><strong>状态：</strong> 
                  {(() => {
                    const config = statusMap[selectedEvent.status];
                    return <Tag color={config.color}>{config.text}</Tag>;
                  })()}
                </p>
              </Card>
            </Col>
            <Col span={12}>
              <Card title="参与成员" size="small">
                <List
                  size="small"
                  dataSource={selectedEvent.members}
                  renderItem={(member) => (
                    <List.Item>
                      <List.Item.Meta
                        avatar={<Avatar icon={<TeamOutlined />} />}
                        title={member}
                      />
                    </List.Item>
                  )}
                />
              </Card>
            </Col>
          </Row>
          <Card title="歌曲安排" size="small" style={{ marginTop: 16 }}>
            <Timeline>
              {selectedEvent.songs.map((song, index) => (
                <Timeline.Item key={index}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <CustomerServiceOutlined />
                    <span>{song}</span>
                    <Tag color="blue">第{index + 1}首</Tag>
                  </div>
                </Timeline.Item>
              ))}
            </Timeline>
          </Card>
          {selectedEvent.description && (
            <Card title="活动描述" size="small" style={{ marginTop: 16 }}>
              <p>{selectedEvent.description}</p>
            </Card>
          )}
        </div>
      )}
    </Modal>
  );
};

export default EventDetailModal; 